<style>
</style>
<div class="layui-layout list-wrapper" style="padding:0 20px;">
    <div class="layui-layout detail-wrapper" style="padding:0 20px;">

                <form class="layui-form">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-sm6">
                            <div align="center">书籍内容</div>


                            <div class="layui-form-item" style="display: none">
                                <label class="layui-form-label">id</label>
                                <div class="layui-input-block">
                                    <input type="text" name="id" required  lay-verify="required"  class="layui-input id" value="{{.book.Id}}">
                                </div>
                            </div>



                            <div class="layui-form-item">
                                <label class="layui-form-label">书名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入书名"  class="layui-input name" value="{{.book.Name}}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">作者名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="author" placeholder="请输入作者名"  class="layui-input author" value="{{.book.Author}}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">频道</label>
                                <div class="layui-input-block">
                                    <select name="channel" lay-verify="required" class="channel" lay-filter="channelselect">
                                        <option value=""></option>
                                        {{if eq .book.ChannelType 1}}
                                            <option value="1" selected>男频</option>
                                            <option value="2">女频</option>
                                            {{else}}
                                                <option value="1">男频</option>
                                                <option value="2" selected>女频</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">书目类别</label>
                                <div class="layui-input-block">
                                    <select name="cat" lay-verify="required" id="bookCat" class="cat">
                                        <option value=""></option>
                                    {{range $index, $elem := .cats}}
                                        <option value="{{$elem.Id}}" {{if eq $.book.Category $elem.Id}}selected{{end}}>{{$elem.CategoryFullname}}</option>
                                    {{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标签</label>
                                <div class="layui-input-block">
                                    <input type="text" name="tag" required lay-verify="required" placeholder="请输入标签"  class="layui-input name" value="{{.tags}}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">来源</label>
                                <div class="layui-input-block">
                                    <select name="isSign" lay-verify="required" class="isSign">
                                        <option value=""></option>
                                    {{if eq .book.IsSign 1}}
                                        <option value="1" selected>原创</option>
                                        <option value="2">非原创</option>
                                    {{else}}
                                        <option value="1">原创</option>
                                        <option value="2" selected>非原创</option>
                                    {{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">简介一</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="{{.book.Name}}（不限字数）" class="layui-textarea desc">{{.book.Desc}}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">简介二</label>
                                <div class="layui-input-block">
                                    <textarea maxlength="20" name="tip" placeholder="{{.book.Name}}（20字以内）" class="layui-textarea tip">{{.book.Tip}}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">封面</label>
                                <div class="layui-input-block">
                                    <img src="https://book-98nice.oss-cn-hangzhou.aliyuncs.com/{{.ossPath}}/{{.book.SerialId}}/cover.jpg?x-oss-process=image/resize,h_100" alt="" id="bookCover">
                                    <button type="button" class="layui-btn layui-btn-xs" id="coverUpLoad" style="vertical-align: bottom;">
                                        <i class="layui-icon">&#xe67c;</i>编辑
                                    </button>
                                    <span style="vertical-align: bottom;">（376*476）</span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">广告图</label>
                                <div class="layui-input-block">
                                    <img src="https://book-98nice.oss-cn-hangzhou.aliyuncs.com/{{.ossPath}}/{{.book.SerialId}}/poster.jpg?x-oss-process=image/resize,w_150" alt="" id="bookPoster">
                                    <button type="button" class="layui-btn layui-btn-xs" id="posterUpLoad" style="vertical-align: bottom;">
                                        <i class="layui-icon">&#xe67c;</i>编辑
                                    </button>
                                    <span style="vertical-align: bottom;">（750*320）</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6 layui-col-sm6">
                            <div align="center">书籍上架安排</div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">入库时间</label>
                                <div class="layui-input-block" style="line-height: 36px">
                                {{.createTime}}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">上架时间</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="releaseTime" id="releaseTime" {{if .releaseTime | compareNow}} disabled {{end}}>
                                </div>
                            </div>



                            <div class="layui-form-item">
                                <label class="layui-form-label">全部章节</label>
                                <div class="layui-input-block" style="line-height: 36px">
                                {{.book.ChapterTotal}}
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">已上线章节</label>
                                <div class="layui-input-block" style="line-height: 36px">
                                {{.onlineChapter}}
                                </div>
                            </div>






                            <div class="layui-form-item">
                                <label class="layui-form-label">上架初始可读章节</label>
                                <div class="layui-input-block">
                                    <input type="text" name="chapterStart" required  lay-verify="required"  class="layui-input chapterStart" value="{{.book.ChapterStart}}" onblur="getFinishTime()">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">动态完结时间</label>
                                <div class="layui-input-block">
                                    <input type="text" name="finishTime" required  lay-verify="required"  class="layui-input finishTime" value="{{.finishTime}}" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">日更章节数</label>
                                <div class="layui-input-block">
                                    <input type="text" name="chapterDaily" required  lay-verify="required"  class="layui-input chapterDaily" value="{{.book.ChapterDaily}}" onblur="getFinishTime()">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">当前点击数</label>
                                <div class="layui-input-block">
                                    <input type="text" name="clicks" required  lay-verify="required"  class="layui-input clicks" value="{{.book.Clicks}}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    <button class="layui-btn" lay-submit lay-filter="bookForm">立即提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>


    </div>
</div>
<script>
    layui.use(['form','upload','laydate'], function(){
        var form = layui.form;
        form.on('select(channelselect)', function(data){
            console.log(data.value);
            $.get('{{urlfor "BookController.GetCats"}}?chanel=' + data.value,function (res) {
                if(res.code == 0){
                    var html = "<option value=''></option>";
                    for (var i = 0;i < res.data.length;i++){
                        html += "<option value=" + res.data[i].Id + ">"+ res.data[i].CategoryFullname +"</option>"
                    }
                    $("#bookCat").html(html);
                    form.render('select');
                }
            })
        });

        //监听提交
        form.on('submit(bookForm)', function(data){
            $.ajax({
                url: '{{urlfor "BookController.SetBook"}}',
                data:data.field,
                type: 'PUT',
                success: function( response ) {
                    if(response.status == 0){
                        layer.msg(response.message);
                    }else {
                        layer.msg(response.message);
                    }
                }
            });
            return false;
        });

        var upload = layui.upload;

        //执行实例
        var uploadCover = upload.render({
            elem: '#coverUpLoad' //绑定元素
            ,url: '{{urlfor "BookController.UpLoadImage"}}?name=cover&id={{.book.Id}}'
            ,done: function(res){
                if (res.status == 0) {
                    //上传完毕回调
                    var src = "https://book-98nice.oss-cn-hangzhou.aliyuncs.com/" + res.message + "?x-oss-process=image/resize,h_100"
                    $("#bookCover").attr("src", src)
                    layer.msg('上传成功');
                } else {
                    layer.msg(res.message);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });

        var uploadPoster = upload.render({
            elem: '#posterUpLoad' //绑定元素
            ,url: '{{urlfor "BookController.UpLoadImage"}}?name=poster&id={{.book.Id}}'
            ,done: function(res){
                if (res.status == 0) {
                    //上传完毕回调
                    var src = "https://book-98nice.oss-cn-hangzhou.aliyuncs.com/" + res.message + "?x-oss-process=image/resize,w_150"
                    $("#bookPoster").attr("src", src)
                    layer.msg('上传成功');
                } else {
                    layer.msg(res.message);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });

        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#releaseTime', //指定元素
            type:'datetime',
            value:'{{.releaseTime}}',
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18

                var totalChapter = '{{.book.ChapterTotal}}';
                var releaseTime = value;
                var chapterStart = $(".chapterStart").val();
                var chapterDaily = $(".chapterDaily").val();
                // if (/^\d+$/.test(chapterStart) || /^\d+$/.test(chapterDaily)){
                //     return;
                // }
                var offTime = Math.ceil((parseInt(totalChapter) - parseInt(chapterStart))/parseInt(chapterDaily));
                var myDate = new Date(releaseTime);
                myDate.setDate(myDate.getDate()+offTime);
                var computedTime = myDate.Format("yyyy-MM-dd hh:mm:ss");
                $(".finishTime").val(computedTime);
            }
        });
    });

    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    function getFinishTime() {
        var totalChapter = '{{.book.ChapterTotal}}';
        var releaseTime = $("#releaseTime").val();
        var chapterStart = $(".chapterStart").val();
        var chapterDaily = $(".chapterDaily").val();
        // if (/^\d+$/.test(chapterStart) || /^\d+$/.test(chapterDaily)){
        //     return;
        // }
        var offTime = Math.ceil((parseInt(totalChapter) - parseInt(chapterStart))/parseInt(chapterDaily));
        var myDate = new Date(releaseTime);
        myDate.setDate(myDate.getDate()+offTime);
        var computedTime = myDate.Format("yyyy-MM-dd hh:mm:ss");
        $(".finishTime").val(computedTime);
    }


</script>